<template>
    <div>
     <div class="zhuzhuang" ref="zhuzhuangtu">
    </div>
 </div>
</template>

<script>
    export default {
        name: "CZHUZHUANGTU",
        data() {
            return {

            }
        },
    computed:{
            A(){
              return this.$store.state.clickdata.A
            },
            clickdata(){
                return this.$store.state.clickdata
            },
          
        },
        watch:{
            A(){
                this.dataEcharts()  
            },
        },
        mounted(){
            this.dataEcharts()
        },
        methods:{
            dataEcharts: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(this.$refs.zhuzhuangtu);
                // 绘制图表
                
                myChart.setOption({
                      
                      xAxis: {
                            data: ['A', 'B', 'C', 'D', 'E']
                        },
                        yAxis: {
                            type:'value'
                        },
                        series: [
                            {
                            data: [this.clickdata.A,this.clickdata.B,this.clickdata.C,this.clickdata.D,this.clickdata.E],
                            type: 'bar',
                            },
                            
                        ]
            })
            // mapEcharts.setOption(option, true);
            },
        }
 }
</script>

<style lang="scss" scoped>
.zhuzhuang{
    width: 600px;
    height: 300px;
    margin-left:40px ;
}

</style>